<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" :default-page-size="row" @onRefresh="onRefresh" @query="getList"
			auto-show-system-loading auto-show-back-to-top>
			<view class="list-box" v-for="(item,index) in dataList" :key="index">
				<view class="title">
					{{index+1}}、{{item.goodsName}}
				</view>
				<view class="item-box" v-if="item.goodsCode">
					<view class="title">
						产品编码
					</view>
					<view class="text">
						{{item.goodsCode}}
					</view>
				</view>
				<!-- <view class="item-box" v-if="item.goodsName">
				<view class="title">
					产品名称
				</view>
				<view class="text">
					{{item.goodsName}}
				</view>
			</view> -->
				<view class="item-box" v-if="item.goodModel">
					<view class="title">
						产品型号
					</view>
					<view class="text">
						{{item.goodModel}}
					</view>
				</view>
				<view class="item-box" v-if="item.unit">
					<view class="title">
						产品单位
					</view>
					<view class="text">
						{{item.unit}}
					</view>
				</view>
				<view class="item-box" v-if="item.goodsBuyPrice">
					<view class="title">
						单价
					</view>
					<view class="text">
						{{item.goodsBuyPrice}}
					</view>
				</view>
				<view class="item-box" v-if="item.shengyu">
					<view class="title">
						采购数量
					</view>
					<view class="text">
						{{item.shengyu}}
					</view>
				</view>
				<view class="item-box" v-if="item.daohuoStatus">
					<view class="title">
						到货状态
					</view>
					<view class="text">
						<span>{{$tools.dictDispose(daohuo_status,item.daohuoStatus)}}</span>
					</view>
				</view>
				<view class="item-box" v-if="item.daohuoCount">
					<view class="title">
						到货数量
					</view>
					<view class="text">
						{{item.daohuoCount}}
					</view>
				</view>
				<view class="item-box" v-if="item.shengyuDaohuoCount">
					<view class="title">
						剩余到货
					</view>
					<view class="text">
						{{item.shengyuDaohuoCount}}
					</view>
				</view>
				<view class="item-box" v-if="item.goodsBuyTotal">
					<view class="title">
						产品总价
					</view>
					<view class="text">
						{{item.goodsBuyTotal}}
					</view>
				</view>
				<view class="item-box" v-if="item.dun">
					<view class="title">
						重量
					</view>
					<view class="text">
						{{item.dun}}
					</view>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		lvBuyList,
		typesBatch
	} from "@/api/system/index"
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				id: '',
				text: '',
				searchValue: '',
				tableList: [{
						title: '全部',
						state: 0
					},
					{
						title: '已完成',
						state: 1
					},
					{
						title: '未完成',
						state: 2
					}
				], //table列表
				row: 10,
				tabList: [],
				tableIndex: 0, //当前选择
				dataList: [],
				daohuo_status:[]
			}
		},
		onLoad(e) {
			this.id = e.id
			this.dictType()
		},
		methods: {
			// 数据字典
			dictType() {
				typesBatch({
					'daohuo_status' : 'daohuo_status'
				}).then(res => {
					this.daohuo_status  = res.data.daohuo_status
				})
			},
			// 当页面滚动到底部事件被触发
			onReachBottom() {
				// 通知z-paging滚动到底部了，z-paging会进行相应的处理，例如加载更多数据
				this.$refs.paging.pageReachBottom();
			},
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					this.$tools.toast('刷新成功～')
				}, 500)
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			getList(pageNum, pageSize) {
				lvBuyList({
					pageNum,
					pageSize,
					mainId: this.id
				}).then(res => {
					this.$refs.paging.complete(res.rows);
					console.log(res, '这是什么')
				})
			},
			inputDialogToggle(e) {
				this.text = e
				this.$refs.inputDialog.open()
			},
			tableChange(item, index) {
				this.tableIndex = index
				// this.$refs.paging.reload()
			},
			goto() {
				uni.navigateTo({
					url: '/pagesA/remit/details/index'
				})
			},
			goto2() {
				uni.navigateTo({
					url: '/pagesA/remit/commodity/index'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}

	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;

		.list-box {
			padding: 20rpx;
			background: #ffffff;
			border-radius: 8rpx;
			margin-bottom: 30rpx;

			.title {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.item-box {
				padding-top: 7rpx;
				padding-bottom: 7rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				border-top: 1px solid #EDEDED;

				.title {
					color: #999999;
					width: 180rpx;
				}

				.text {
					width: 420rpx;
				}
			}
		}

	}
</style>